<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button type="button" id="reset">重新开始一局游戏</button>
<br>
请输入要猜的数字：<input type="text" id="number">
<button type="button" id="button">猜</button>
<br>
已经猜的次数：<span id="count">0</span>
<br>
结果：<span id="result"></span>
</body>
<script>
    var inputE = document.querySelector("#number");
    var countE = document.querySelector("#count");
    var resultE = document.querySelector("#result");
    var btn = document.querySelector("#button");
    var resetBtn = document.querySelector("#reset");
    // 随机生成一个 1-100 的数字
    var guessNumber = Math.floor(Math.random() * 100) + 1
    console.log(guessNumber)
    var count = 0;
    btn.onclick = function() {
        count++;
        countE.innerText = count;
        var userGuess = parseInt(inputE.value);
        if (userGuess == guessNumber) {
            resultE.innerText = "猜对了";
            resultE.style = "color: gray;";
       } else if (userGuess < guessNumber) {
            resultE.innerText = "猜小了";
            resultE.style = "color: blue;";
       } else {
            resultE.innerText = "猜大了";
            resultE.style = "color: red;";
       }
   };
    resetBtn.onclick = function() {
        guessNumber = Math.floor(Math.random() * 100) + 1
        count = 0;
        countE.innerText = count;
        resultE.innerText = "";
        inputE.value = "";
   }
</script>
</html>